<template>
  <el-card class="product-item" @click="goToDetail">
    <img :src="product.imageUrl" alt="" class="product-image">
    <h3>{{ product.name }}</h3>
    <p>价格：{{ product.price }}￥</p>
    <p>{{ product.description }}</p>
    <el-button type="primary" @click.stop="addToCart">加入购物车</el-button>
    <el-button type="success" @click.stop="addToWishlist">加入收藏夹</el-button>
  </el-card>
</template>

<script>
export default {
  name: 'ProductItem',
  props: ['product'],
  methods: {
    goToDetail() {
      this.$router.push({ name: 'ProductDetail', params: { id: this.product.id } });
    },
    addToCart() {
      if (this.$store.state.isLoggedIn) {
        this.$store.dispatch('addToCart', this.product);
        this.$message.success('商品已添加到购物车');
      } else {
        this.$message.error('请先登录');
        this.$router.push('/login');
      }
    },
    addToWishlist() {
      if (this.$store.state.isLoggedIn) {
        this.$store.dispatch('addToWishlist', this.product);
        this.$message.success('商品已添加到收藏夹');
      } else {
        this.$message.error('请先登录');
        this.$router.push('/login');
      }
    }
  }
};
</script>

<style>
/* .product-item {
  /* 你的样式 */
*/
.product-image {
  max-width: 100%;
  height: auto;
}
</style>